<template>
    <div>
        门店类型:
        <select v-model="ts.memberid">
            <option value="0">请选择</option>
            <option v-for="c in data3" :value="c.memberId">{{ c.memberName }}</option>
        </select>
        卡卷名称:<input type="text" v-model="ts.name">
        卡卷类型:
        <select v-model="ts.instateid">
            <option value="0">请选择</option>
            <option v-for="d in data1" :value="d.inStateId">{{ d.inStateName }}</option>
        </select>
        状态:
        <select v-model="ts.stateid">
            <option :value="0">请选择</option>
            <option :value="1">上架</option>
            <option :value="2">下架</option>
        </select>
        <input type="button" value="查询" @click="xx">
        <input type="button" value="重置" @click="xxx">
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="sss" @change="select"></td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>卡卷类型</td>
                    <td>门店类型</td>
                    <td>使用日期</td>
                    <td>有效期</td>
                    <td>价格</td>
                    <td>状态类型</td>
                    <td>图片</td>
                    <td>是否删除</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td><input type="checkbox" v-model="ssss" :value="a.inStaeId"></td>
                    <td>{{ a.inStaeId }}</td>
                    <td>{{ a.inStaeName }}</td>
                    <td>{{ a.inStateName }}</td>
                    <td>{{ a.memberName }}</td>
                    <td>{{ a.dateName }}</td>
                    <td>{{ a.yong }}</td>
                    <td>{{ a.price }}</td>
                    <td :style="a.isTteName=='上架'?'color:red;':'color:green;'">{{ a.isTteName }}</td>
                    
                    <td>
                        <img :src="'https://localhost:7101/'+a.img" width="50px" height="50px">
                    </td>
                    <td>{{ a.isDelete }}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="del(a.inStaeId)">
                        <input type="button" value="编辑" @click="upd(a.inStaeId)">
                        <input type="button" :value="a.isTteName=='上架'?'下架':'上架'" @click="supdd(a.inStaeId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="b in zys.row" :value="b" @click="yema(b)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前第{{ ts.index }}页 共{{ zys.list }}条 每页{{ ts.size }}条 共{{ zys.row }}页
        <input type="number" v-model="ts.index"><input type="button" value="跳转" @click="tiao()">
        <select v-model="ts.size" @click="yerongliang()">
            <option>5</option>
            <option>10</option>
            <option>15</option>
        </select>
        <input type="button"  value="批量修改" @click="updd()">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
const routher = useRouter();
onMounted(()=>{
    show()
    getdatea()
    getdateb()
    getdatec()
})
const upd=(val:any)=>{
    routher.push({path:"/Update",query:{id:val}})
}
const supdd=(val:any)=>{
    axios.get("/api/InStae/UpdState",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }
        else{
            alert("修改失败")
        }
    })
}
const updd=()=>{
    if(!confirm("确认修改吗")){
        return
    }
    axios.get("/api/InStae/UpdState",{params:{id:ssss.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }
        else{
            alert("修改失败")
        }
    })
}
const del=(val:any)=>{
    if(!confirm("确认删除吗")){
        return
    }
    axios.delete("/api/InStae/DelInStae",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
//卡卷
const getdatea=()=>{
    axios.get("/api/InState/GetInStates").then(res=>{
        data1.value=res.data
    })
}
const data1=ref([{
    "inStateId": 0,
    "inStateName": ""
}])
//状态
const getdateb=()=>{
    axios.get("/api/IsTae/GetIsTtes").then(res=>{
        data2.value=res.data
    })
}
const data2=ref([{
    "isTteId": 0,
    "isTteName": ""
}])
//门店
const getdatec=()=>{
    axios.get("/api/Member/GetMembers").then(res=>{
        data3.value=res.data
    })
}
const data3=ref([{
    "memberId": 0,
    "memberName": ""
}])
const xx=()=>{
    show()
}
const xxx=()=>{
    ts.value={
        index:1,
        size:5,
        memberid:0,
        name:'',
        instateid:0,
        stateid:0
    }
    show()
}
const sss=ref(false)
const ssss=ref([])
const select=()=>{
    if(sss.value){
        date.value.forEach(e=>{
            ssss.value.push(e.inStaeId)
        })
    }
    else{
        ssss.value=[];
    }
}
const yerongliang=()=>{
    show()
}
const tiao=()=>{
    show()
}
const yema=(val:any)=>{
    ts.value.index=val;
    show()
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
const ts=ref({
    index:1,
    size:5,
    memberid:0,
    name:'',
    instateid:0,
    stateid:0
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("/api/InStae/Show",{params:ts.value}).then(res=>{
        date.value=res.data.row
        zys.value.list=res.data.list
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}
const date=ref([{
    "memberId": 0,
    "inStaeId": 0,
    "isTteId": 0,
    "inStateId": 0,
    "dateName": "",
    "dateNum": 0,
    "inStaeName": "",
    "img": "",
    "isDelete": false,
    "price": 0,
    "inStateName": "",
    "isTteName": "",
    "memberName": "",
    "yong":""
}])
</script>

<style scoped>

</style>